<template>
    <component :is="dragComponents[props.options.name]" :options="props.options" class="box" :class="{ select: props.options.id === selectOption.id }" @click="click" v-scale></component>
</template>
    
<script setup>
    import {inject, computed } from 'vue'
    import dragComponents from './DragComponents.js';
    import { componentsNameList } from '@/store/pinia';
    import { findSelectOption } from "@/hooks/drag/findSelectOption"
    const props = defineProps(['options'])
    const componentClick = inject('componentClick')
    const click = (e)=>{
        e.stopPropagation();
        const options = findSelectOption(componentsNameList().list,props.options.id)
        componentsNameList().updateSelectOption(options)
        componentClick(props.options,e)
    }
    const selectOption = computed(() => {
        return componentsNameList().selectOption      
    })
</script>
    
<style scoped>
.box{
    padding: 10px;
    margin-bottom: 5px;
    background-color: #fff;
}
    .box:active{
        border: 1px dotted black;
    }
    .box:hover{
        cursor: pointer;
    }
    .select{
    border-left: 5px solid #409eff;
}
</style>./DragComponents.js